<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2024-01-04 14:14:23
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-01-31 17:46:40
 * @FilePath: /hr_new_vue3/src/views/Management/Human/ChangeManagement/LeaveManagement/LeaveApply/Components/PostLeaveApply/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 发起离职申请 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew title="离职申请" showBack></pageHeaderNew>
    </template>

    <section>
      <header class="title">
        <span>申请详情</span>
      </header>
      <a-form
        :model="formData.data"
        auto-label-width
        ref="formRef"
        :rules="rules"
      >
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="applyCode" label="离职申请审批编号" show-colon>
              <a-input placeholder="系统自动读取" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="leavePersonId" label="离职人员姓名" show-colon>
              <a-select
                placeholder="请选择"
                :popup-visible="false"
                @popup-visible-change="showHumanModal"
                v-model="formData.data.leavePersonId"
              >
                <a-option
                  v-for="item in humanRoster"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.name }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              field="leaveDepartment"
              label="离职人员部门"
              show-colon
            >
              <a-input
                v-model="formData.data.leaveDepartment"
                placeholder="系统自动读取"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="leavePosition" label="离职人员职位" show-colon>
              <a-input
                placeholder="系统自动读取"
                disabled
                v-model="formData.data.leavePosition"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="enterDate" label="入职日期" show-colon>
              <a-input
                placeholder="系统自动读取"
                disabled
                v-model="formData.data.entryTime"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="leavePlanDate" label="计划离职日期" show-colon>
              <a-date-picker
                placeholder="请选择日期"
                v-model="formData.data.leavePlanDate"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="lastWorkDate" label="最后工作日期" show-colon>
              <a-input
                disabled
                placeholder="系统自动读取"
                v-model="formData.data.lastWorkDate"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="salaryDate" label="薪资结算日期" show-colon>
              <a-date-picker
                placeholder="请选择日期"
                v-model="formData.data.salaryDate"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="applyPersonId" label="申请人" show-colon>
              <a-select
                placeholder="请选择"
                v-model="formData.data.applyPersonId"
                disabled
              >
                <a-option
                  v-for="item in humanRoster"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.name }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="applyDepartment" label="申请人部门" show-colon>
              <a-input
                placeholder="系统自动读取"
                disabled
                v-model="formData.data.applyDepartment"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="applyPosition" label="申请人职位" show-colon>
              <a-input
                placeholder="系统自动读取"
                disabled
                v-model="formData.data.applyPosition"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="applyDate" label="申请日期" show-colon>
              <a-input
                placeholder="系统自动读取"
                disabled
                v-model="formData.data.applyDate"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="leaveType" label="离职类型" show-colon>
              <a-select
                placeholder="请选择"
                v-model="formData.data.leaveType"
                @change="leaveTypeChange"
              >
                <a-option
                  v-for="item in LEAVE_TYPE"
                  :key="item.key"
                  :value="item.key"
                >
                  {{ item.label }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="leaveReason" label="离职原因" show-colon>
              <a-select
                placeholder="请选择"
                v-model="formData.data.leaveReason"
              >
                <a-option
                  v-for="item in leaveReasonList"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.reason }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="handoverType" label="工作交接类型" show-colon>
              <a-radio-group v-model="formData.data.handoverType">
                <a-radio :value="1">完成工作交接</a-radio>
                <a-radio :value="2">无需工作交接</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              field="isBlackList"
              label="加入黑名单"
              show-colon
              tooltip="被列入黑名单的人员，在招聘、入职环节，系统会自动提醒。"
            >
              <a-checkbox
                :value="1"
                :default-checked="false"
                v-model="formData.data.isBlackList"
              ></a-checkbox>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item field="remark" label="备注" show-colon>
              <a-textarea
                placeholder="请输入内容"
                v-model="formData.data.remark"
                :auto-size="{
                  minRows: 4
                }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="files" label="文件上传" show-colon>
              <UploadFile
                class="file"
                ref="uploadRef"
                :draggable="false"
                tip="请上传JPG、JPEG、PNG、DOC、DOCX、PDF、EXCEL、XLSX、XLS格式"
                :fileTypeList="fileTypeList"
                :userId="userId"
                :type="2"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </section>
    <section>
      <div class="title">
        <span>审批流程</span>
      </div>
    </section>
    <footer>
      <a-space>
        <a-button type="outline" class="btn" @click="router.back()"
          >取消</a-button
        >
        <a-button type="primary" class="btn" @click="submit">提交申请</a-button>
      </a-space>
    </footer>
  </ContentCard>

  <HumanRosterModal
    style="z-index: 9999"
    v-model:visible="humanModalVisible"
    @humanRosterEmit="humanRosterEmit"
    typeName="1,2,3,4,5,6,7,8,9,10,11,12"
  ></HumanRosterModal>
</template>

<script lang="ts" setup>
import {
  getAllHumanRoster,
  getOrganizationDetailById,
  getPositionDetailById,
  getHumanDetail
} from '@/utils/common';
import { GetSession } from '@/apis/human/base/dimissionSetting/index';
import { LEAVE_TYPE } from '@/utils/constants';
import dayjs from 'dayjs';
import { Message } from '@arco-design/web-vue';
import { PostLeaveApplyPersonnel } from '@/apis/management/human/humanChange/leave';

const router = useRouter();

const formData = reactive({
  data: {
    applyCode: '', // 申请编号
    leavePersonId: '', // 离职人员姓名
    leaveDepartment: '', // 离职人员部门
    leavePosition: '', // 离职人员职位
    entryTime: '', // 入职日期
    leavePlanDate: '', // 计划离职日期
    lastWorkDate: '', // 最后工作日期
    salaryDate: '', // 薪酬发放日期
    applyPersonId: +localStorage.getItem('userId'), // 申请人
    applyDepartment: '', // 申请人部门
    applyPosition: '', // 申请人职位
    applyDate: '', // 申请日期
    leaveType: '', // 离职类型
    leaveReason: '', // 离职原因
    handoverType: 1, // 工作交接类型
    isBlackList: false, // 加入黑名单
    remark: '', // 备注
    files: [] // 文件
  }
});

const rules = {
  // applyCode: [
  //   {
  //     required: true,
  //     message: '请输入申请编号'
  //   }
  // ],
  leavePersonId: [
    {
      required: true,
      message: '请选择离职人员姓名'
    }
  ],
  leaveDepartment: [
    {
      required: true,
      message: '请选择离职人员部门'
    }
  ],
  leavePlanDate: [
    {
      required: true,
      message: '请选择计划离职日期'
    }
  ],
  applyPersonId: [
    {
      required: true,
      message: '请选择申请人'
    }
  ],
  applyDepartment: [
    {
      required: true,
      message: '请选择申请人部门'
    }
  ],
  applyPosition: [
    {
      required: true,
      message: '请选择申请人职位'
    }
  ],
  leaveType: [
    {
      required: true,
      message: '请选择离职类型'
    }
  ],
  leaveReason: [
    {
      required: true,
      message: '请输入离职原因'
    }
  ],
  handoverType: [
    {
      required: true,
      message: '请选择工作交接类型'
    }
  ]
};

let formRef = ref();
let uploadRef = ref();
const fileTypeList = [
  '.png',
  '.jpeg',
  '.jpg',
  '.doc',
  '.docx',
  '.pdf',
  '.xls',
  '.xlsx'
];

let humanRoster = ref([]); // 所有人员数据
const getData = async () => {
  try {
    const humanRosterRes = await getAllHumanRoster();
    humanRoster.value = humanRosterRes;
    getPersonData(+formData.data.applyPersonId, 2);
    formData.data.applyDate = dayjs().format('YYYY-MM-DD');
  } catch (error: unknown) {
    console.log(error);
  }
};

// 获取人员详情 type 1:离职人员 2:申请人
const getPersonData = async (id: number, type: 1 | 2) => {
  try {
    const personDetail = await getHumanDetail(id);

    const [department, position] = await Promise.all([
      getOrganizationDetailById(personDetail.departmentId),
      getPositionDetailById(personDetail.positionId)
    ]);
    if (type === 1) {
      formData.data.leaveDepartment = department.name;
      formData.data.leavePosition = position.name;
      formData.data.entryTime = position.entryTime | '';
    } else {
      formData.data.applyDepartment = department.name;
      formData.data.applyPosition = position.name;
    }
  } catch (error: unknown) {
    console.log(error);
  }
};

// 初始化数据
const init = () => {
  getData();
};
init();

let humanModalVisible = ref(false); // 人员选择弹出框
// 选择离职人员弹框
const showHumanModal = () => {
  humanModalVisible.value = true;
};

const humanRosterEmit = (record: any) => {
  formData.data.leavePersonId = record.id;
  getPersonData(record.id, 1);
};

let leaveReasonList = ref([]); // 离职原因数据
const leaveTypeChange = async (val: number) => {
  try {
    const res = await GetSession({
      type: val,
      pageNumber: 0,
      pageSize: -1
    });
    leaveReasonList.value = res.content.filter((el: any) => el.enable === 1);
  } catch (error: unknown) {
    console.log(error);
  }
};

const submit = async () => {
  try {
    if (await formRef.value?.validate()) {
      Message.error('请填写必填项');
      return;
    }
    await PostLeaveApplyPersonnel(formData.data);
  } catch (error: unknown) {
    console.log(error);
  }
};
</script>

<style lang="less" scoped>
.title {
  min-height: 30px;
  font-weight: 600;
  font-size: 14px;
  background: #f5f7fb;
  padding: 5px 0;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  &::before {
    content: '';
    margin: 0 5px;
    display: inline-block;
    width: 3px;
    height: 12px;
    border-left: #409efe solid 1px;
    background: #409efe;
  }
  .title-right {
    flex: 1;
    text-align: right;
  }
}

footer {
  height: 60px;
  width: calc(100% - 100px);
  background-color: #fff;
  box-shadow: 1px -1px 10px 0 #cacaca;
  position: fixed;
  bottom: 0;
  left: 10%;
  display: flex;
  justify-content: center;
  align-items: center;

  .btn {
    width: 120px;
    height: 40px;
    border-radius: 5px;
  }
}
</style>
